<template>
  <div class="links">
    <div class="links-box" v-for="item in linkList" :key="item.id">
      <friend-links v-bolang="'#66afef99'" @click="goLink(item)">
        <div class="links-item">
          <img v-if="item.img" :src="item.img" alt="头像" />
          <svg
            v-if="!item.img"
            t="1690104123405"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4514"
            width="200"
            height="200"
          >
            <path
              d="M512 32C246.912 32 32 246.848 32 512s214.912 480 480 480c265.152 0 480-214.848 480-480S777.152 32 512 32zM320.256 143.04c20.864-10.88 42.688-20.16 65.408-27.392-23.616 34.624-43.968 78.656-59.904 129.6-23.808-15.232-37.76-33.472-37.76-53.248 0-17.984 12.224-34.56 32.256-48.96zM227.136 209.344c7.424 37.568 36.864 71.296 82.752 96.512-11.84 53.376-19.2 112.064-21.12 174.144H97.6a414.464 414.464 0 0 1 129.536-270.656z m0 605.312A414.464 414.464 0 0 1 97.6 544h191.104c1.92 62.08 9.344 120.768 21.184 174.144-45.888 25.088-75.328 58.944-82.752 96.512z m93.12 66.304C300.224 866.56 288 849.92 288 832c0-19.776 13.952-38.08 37.76-53.312 15.936 51.008 36.288 94.976 59.904 129.664a411.392 411.392 0 0 1-65.408-27.392z m159.744 38.656c-40.192-21.184-74.816-81.856-97.92-165.568a425.536 425.536 0 0 1 97.92-16.704v182.272z m0-245.824a454.592 454.592 0 0 0-111.68 20.288A966.4 966.4 0 0 1 352.64 544H480v129.792z m0-193.792H352.64a966.4 966.4 0 0 1 15.68-150.08 460.608 460.608 0 0 0 111.68 20.352V480z m0-193.344a432.512 432.512 0 0 1-97.92-16.704c23.104-83.712 57.728-144.32 97.92-165.568v182.272z m316.864-77.312A414.08 414.08 0 0 1 926.336 480h-191.104c-1.92-62.08-9.344-120.768-21.184-174.144 45.952-25.152 75.392-58.944 82.816-96.512z m-93.12-66.304c20.032 14.4 32.256 30.976 32.256 48.96 0 19.776-13.952 38.016-37.76 53.248-15.936-50.944-36.288-94.976-59.968-129.6a409.6 409.6 0 0 1 65.472 27.392zM544 104.384c40.256 21.248 74.88 81.856 97.92 165.568a432.512 432.512 0 0 1-97.92 16.704V104.384z m0 245.888a460.096 460.096 0 0 0 111.68-20.288c8.64 45.888 14.144 96.448 15.68 150.016H544V350.272z m0 193.728h127.36c-1.536 53.568-7.04 104.128-15.68 150.144a454.016 454.016 0 0 0-111.68-20.288V544z m0 375.616v-182.272a425.536 425.536 0 0 1 97.92 16.704c-23.04 83.712-57.664 144.384-97.92 165.568z m159.744-38.656c-20.864 10.88-42.688 20.16-65.408 27.456 23.616-34.688 44.032-78.656 59.968-129.664 23.808 15.232 37.76 33.536 37.76 53.312-0.064 17.856-12.288 34.496-32.32 48.896z m93.12-66.304c-7.424-37.568-36.928-71.36-82.816-96.512a936.96 936.96 0 0 0 21.184-174.144h191.104a414.08 414.08 0 0 1-129.472 270.656z"
              fill=""
              p-id="4515"
            ></path>
          </svg>
          <div class="links-item-right">
            <div class="links-item-right-title">
              <span>{{ item.title }}</span>
            </div>
            <span class="links-item-right-descript">
              {{ item.description }}
            </span>
          </div>
        </div>
      </friend-links>
    </div>
  </div>
</template>

<script setup lang="ts">
import FriendLinks from '@/components/clickCard.vue'
import { ref, onMounted } from 'vue'
import axios from '@/http'
import { TLink } from '@/type/link'

const linkList = ref<TLink[]>([])
onMounted(() => {
  getLinkList()
})
const getLinkList = () => {
  axios.get('link/search').then((res) => {
    linkList.value = res.data.data
  })
}

const goLink = (link: any) => {
  window.open(link.url, '_blank')
}
</script>

<style lang="scss" scoped>
.links {
  padding: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &-box {
    box-sizing: border-box;
    width: 50%;
    padding: 10px;
  }

  &-item {
    display: flex;
    align-items: center;
    height: 100px;
    margin: 0 15px;
    img {
      flex-basis: 60px;
      width: 60px;
      height: 60px;
      border-radius: 60px;
      margin-right: 10px;
    }
    svg {
      width: 60px;
      height: 60px;
      border-radius: 60px;
      margin-right: 10px;
      background-color: #d3d3d3;
    }
    &-right {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &-title {
        font-weight: 800;
        font-size: 16px;
        margin-bottom: 4px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &-descript {
        width: 100%;
        word-break: break-all;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>
